/** @define TransUnit; use strict */

:root {
  --TransUnit-border-color           : color(#416988 alpha(8%));
  --TransUnit-color-danger           : #e0575b;
  --TransUnit-color-highlight        : #4e9fdd;
  --TransUnit-color-neutral          : color(#416988 tint(65%));
  --TransUnit-color-success          : #70a98b;
  --TransUnit-color-unsure           : #e0c350;
  --TransUnit-color-warning          : #ffa800;
  --TransUnit-color-secondary        : #20718A;
  --TransUnit-header-footer-color-bg : #fff;
  --TransUnit-heading-font-size      : 1rem;
  --TransUnit-metaDataButton-size    : calc(12 /16 * 1rem);
  --TransUnit-rhythm                 : 1.5rem;
  --TransUnit-text-font-family       : "Source Sans Pro", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  --TransUnit-text-font-size         : 1rem;
  --TransUnit-text-line-height       : 1.5;
  --TransUnit-text-color             : #444c54;
  --TransUnit-transition             : opacity .25s var(--TransUnit-transition-ease);
  --TransUnit-transition-ease        : cubic-bezier(.075, .820, .165, 1.000);
  --TransUnit-focus-color-bg         : #fff;
  --TransUnit-hover-color-bg         : color(#fff shade(3%));
  --TransUnit-status-z-index         : 200;
  --TransUnit-status-before-z-index  : 300;
  --TransUnit-status-after-z-index   : 400;
}

.TransUnit {
  position: relative;
  margin: 0;
  padding: 0;
  cursor: text;
  user-select: none;
  border-bottom: 1px solid var(--TransUnit-border-color);
}

.TransUnit:focus {
  outline: 0;
  box-shadow: none;
}

.TransUnit.is-focused {
  opacity: 1 !important;
  background-color: var(--TransUnit-focus-color-bg);
}

.TransUnit:before,
.TransUnit:after {
  position: absolute;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: var(--TransUnit-rhythm);
  content: "";
  /*transition: var(--TransUnit-transition);*/
  transform: scaleY(0);
  opacity: 0;
  background-color: var(--TransUnit-focus-color-bg);
  background-clip: padding-box;
}

.TransUnit:before {
  box-shadow: 0 calc(var(--TransUnit-rhythm) * -.25) calc(var(--TransUnit-rhythm) * .5) rgba(0,0,0,.04);
  transform-origin: bottom;
  top: calc(var(--TransUnit-rhythm) * -.75);
}

.TransUnit:after {
  box-shadow: 0 calc(var(--TransUnit-rhythm) * .25) calc(var(--TransUnit-rhythm) * .5) rgba(0,0,0,.04);
  transform-origin: top;
  bottom: calc(var(--TransUnit-rhythm) * -.75);
}

.TransUnit.is-focused:before,
.TransUnit.is-focused:after {
  visibility: visible;
  transform: scaleY(1);
  opacity: 1;
}

.TransUnit.is-first {
  border-top: 1px solid var(--TransUnit-border-color);
}

/* Pair with .Editor-content */
.TransUnit-container.is-unit-selected .TransUnit {
  opacity: 0.8;
}

/**
 * Panels
 */

.TransUnit-panel {
  position: relative;
  padding-top: calc(var(--TransUnit-rhythm) * .75);
  padding-bottom: calc(var(--TransUnit-rhythm) * .75);
  padding-left: var(--TransUnit-rhythm);
  list-style: none;
  vertical-align: top;
}

.TransUnit-item {
  position: relative;
}

.TransUnit-source {
  cursor: pointer;
  user-select: text;
}

.TransUnit.is-focused .TransUnit-source {
  cursor: text;
}

.TransUnit-translation {
  cursor: text;
  user-select: text;
}

/**
 * Translation and source Header and Footer
 */

.TransUnit-panelHeader,
.TransUnit-panelFooter,
.TransUnit-itemHeader {
  position: absolute;
  right: 0;
  left: 0;
  padding-right: calc(var(--TransUnit-rhythm) * .75);
  cursor: default;
}

.TransUnit-panelHeader,
.TransUnit-panelFooter {
  visibility: hidden;
  /*transition: var(--TransUnit-transition);*/
  opacity: 0;
}

.TransUnit.is-focused .TransUnit-panelHeader,
.TransUnit.is-focused .TransUnit-panelFooter {
  visibility: visible;
  opacity: 1;
}

.TransUnit-panelHeader {
  top: calc(var(--TransUnit-rhythm) * -.75);
}

.TransUnit-itemHeader {
  top: 0;
}

.TransUnit-panelFooter {
  bottom: calc(var(--TransUnit-rhythm) * -.75);
  z-index: var(--TransUnit-header-z-index);
}

.TransUnit-heading {
  font-size: var(--TransUnit-heading-font-size);
  font-weight: 400;
  line-height: calc(var(--TransUnit-rhythm) * 1.5);
  display: inline-block;
  float: left;
  margin: 0;
  vertical-align: top;
  text-transform: uppercase;
}

h3.TransUnit-heading {
  padding-left:1.5rem;
  color: var(--TransUnit-color-secondary);
}

.TransUnit-text {
  font-family: var(--TransUnit-text-font-family);
  font-size: var(--TransUnit-text-font-size);
  line-height: var(--TransUnit-text-line-height);
  overflow: hidden;
  width: 90%;
  min-height: var(--TransUnit-rhythm);
  margin: 0;
  padding: calc(var(--TransUnit-rhythm) * .75);
  resize: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  tab-size: 8;
  color: var(--TransUnit-text-color);
  border: none;
  background-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;
}

.TransUnit-text:focus {
  border: none;
  outline: none;
  background-color: transparent;
}

/**
 * Override text highlighting changing text format
 * otherwise it won't align
 */

.TransUnit-text span {
  font-weight: 400 !important;
  font-style: normal !important;
}

/**
 * Status bar
 */

.TransUnit-status,
.TransUnit-status:before,
.TransUnit-status:after {
  position: absolute;
  z-index: var(--TransUnit-status-z-index);
  left: 0;
  width: var(--TransUnit-rhythm);
  background-color: var(--TransUnit-color-neutral);
}

.TransUnit-status {
  top: -1px;
  bottom: -1px;
}

.TransUnit-status.is-loading,
.TransUnit-status.is-loading:before {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent calc(var(--TransUnit-rhythm) * .25),
    rgba(255,255,255,.5) calc(var(--TransUnit-rhythm) * .25),
    rgba(255,255,255,.5) calc(var(--TransUnit-rhythm) * .5)
  );
  background-size: 100% 1000px;
  animation: loading 7s linear;
  animation-iteration-count: infinite;
}

.TransUnit-status:before {
  top: calc(var(--TransUnit-rhythm) * -.75);
  height: 100%;
  padding-top: calc(var(--TransUnit-rhythm) * .75);
  padding-bottom: calc(var(--TransUnit-rhythm) * .75);
  box-sizing: content-box;
  z-index: var(--TransUnit-status-before-z-index);
  visibility: hidden;
  content: '';
  transform: scaleY(.65);
}

.TransUnit-status:after {
  transition: none;
  z-index: var(--TransUnit-status-after-z-index);
  top: 0;
  box-sizing: content-box;
  width: calc(var(--TransUnit-rhythm) * .875);
  height: 100%;
  content: '';
  background-color: #fff;
  opacity: 0.6;
}

.TransUnit.is-focused .TransUnit-status:before {
  visibility: visible;
  transform: scaleY(1);
}

.TransUnit.is-focused .TransUnit-status:after {
  top: calc(var(--TransUnit-rhythm) * -.75);
  padding-top: calc(var(--TransUnit-rhythm) * .75);
  padding-bottom: calc(var(--TransUnit-rhythm) * .75);
  opacity: 0.8;
}

.TransUnit.is-focused .TransUnit-status {
  z-index: 300;
}

/**
 * Meta data
 */

.TransUnit-metaData {
  position: relative;
  right: 0;
  left: 0;
  height: 100%;
  text-align: center;
}

.TransUnit-panelHeader--source {
  width: 95%;
}

.TransUnit-panelHeader--source h3.TransUnit-heading {
  padding-left: 1.5rem !important;
}

.TransUnit-metaDataItem {
  line-height: calc(var(--TransUnit-rhythm) * .75);
}

.TransUnit-metaDataButton {
  font-size: var(--TransUnit-metaDataButton-size);
  line-height: calc(var(--TransUnit-rhythm) * .4);
  opacity: 0.8;
}

.TransUnit-metaDataButton:hover {
  opacity: 1;
}

.TransUnit-metaDataComments,
.TransUnit-metaDataErrors,
.TransUnit-metaDataMT{
  position: absolute;
  right: 0;
  left: 0;
}
.TransUnit-metaDataComments,
.TransUnit-metaDataMT button{
  width: 17px;
  height: 17px;
  font-size: 0.6rem;
  background: white; 
  border-radius: 50%;
  box-shadow: -0.2px -0.2px 1px;
}

.TransUnit-metaDataComments {
  top: calc(var(--TransUnit-rhythm) * .75);
}

.TransUnit-metaDataErrors {
  top: calc(var(--TransUnit-rhythm) * 1.75);
}

.TransUnit-metaDataMT {
  top: calc(var(--TransUnit-rhythm) * 2.75);
}

.TransUnit-metaDataErrorsIcon {
  text-shadow: 0 0 2px #fff;
}

/**
 * Small Size Down
 */

@media (--sm-viewport) {
  .TransUnit-Heading {
    padding-left: calc(var(--TransUnit-rhythm) * 1);
  }

  .TransUnit-panelFooterLeftNav {
    padding-left: calc(var(--TransUnit-rhythm) * 1);
  }
}

/**
 * Medium Size Up
 */

@media (--gtemd-viewport) {
  .TransUnit,
  .TransUnit-item {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .TransUnit-panel {
    display: table-cell;
    width: 50%;
    padding-left: 0;
  }

  .TransUnit-source {
    padding-right: calc(var(--TransUnit-rhythm) * .5);
  }

  .TransUnit-translation {
    padding-left: calc(var(--TransUnit-rhythm) * .5);
  }

  /* Cover the overlapping headers */

  .TransUnit-panelHeader--source,
  .TransUnit-panelFooter--source {
    padding-right: calc(var(--TransUnit-rhythm) * 1.25);
    right: auto;
  }

  .TransUnit-panelHeader--translation,
  .TransUnit-panelFooter--translation {
    padding-left: calc(var(--TransUnit-rhythm) * 1.25);
  }

  .TransUnit-status,
  .TransUnit-status:before,
  .TransUnit-status:after {
    left: 50%;
    margin-left: calc(var(--TransUnit-rhythm) * -.5);
  }
}

/**
 * Status bar Modifiers
 */

.TransUnit--highlight .TransUnit-status,
.TransUnit--highlight .TransUnit-status:before {
  background-color: var(--TransUnit-color-highlight);
}

.TransUnit--success .TransUnit-status,
.TransUnit--success .TransUnit-status:before {
  background-color: var(--TransUnit-color-success);
}

.TransUnit--unsure .TransUnit-status,
.TransUnit--unsure .TransUnit-status:before {
  background-color: var(--TransUnit-color-unsure);
}

.TransUnit--warning .TransUnit-status,
.TransUnit--warning .TransUnit-status:before {
  background-color: var(--TransUnit-color-warning);
}

.TransUnit--danger .TransUnit-status,
.TransUnit--danger .TransUnit-status:before {
  background-color: var(--TransUnit-color-danger);
}

.TransUnit--secondary .TransUnit-status,
.TransUnit--secondary .TransUnit-status:before {
  background-color: var(--TransUnit-color-secondary);
}

/**
 * Type Modifiers
 */

.TransUnit--suggestion:hover {
  background-color: var(--TransUnit-hover-color-bg);
}

.TransUnit--suggestion .TransUnit-panel {
  padding-top: calc(var(--TransUnit-rhythm) * .5);
  padding-bottom: calc(var(--TransUnit-rhythm) * .5);
}

.TransUnit--suggestion .TransUnit-details {
  padding-left: calc(var(--TransUnit-rhythm) * .75);
  padding-right: calc(var(--TransUnit-rhythm) * .75);
}

.TransUnit--suggestion .TransUnit-text--tight {
  padding-top: 0;
  padding-bottom: 0;
}

.TransUnit--suggestion .TransUnit-source {
  cursor: default;
}

@keyframes loading {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 1000px;
  }
}
